<template>
  <div>
    <title-info :titInfo="Data.pageInfo"> </title-info>
    <div class="card-container">
      <CanvasContainer
        :prpopsStyle="{
          width: 'calc(100% - 350px)',
          height: '100%',
        }"
        :imgList="Data.imgList"
      />

      <div class="right overflow-y-auto">
        <div>考生姓名：</div>
        <span>{{ Data.pageInfo.xm || '--' }}</span>
        <div>考生准考证号：</div>
        <span>{{ Data.pageInfo.zkzh || '--' }}</span>
        <div>是否缺考：</div>
        <span :class="Data.pageInfo.qk === 1 ? 'text-red-600 ' : 'text-green-600'">
          {{ Data.pageInfo.qk === 1 ? '缺考' : Data.pageInfo.qk === 0 ? '否' : '--' }}
        </span>
        <div>册号：</div>
        <span>{{ Data.pageInfo.ch || '--' }}</span>
        <div>册内序号：</div>
        <span>{{ Data.pageInfo.cnxh || '--' }}</span>
        <div>扫描状态：</div>
        <span :class="Data.pageInfo.sfsm === 1 ? 'text-green-600 ' : 'text-red-600'">
          {{ Data.pageInfo.sfsm === 1 ? '已扫描' : Data.pageInfo.sfsm === 0 ? '未扫描' : '--' }}
        </span>
        <div>扫描时间：</div>
        <span>{{ Data.pageInfo.smsj || '--' }}</span>
        <div>打印状态：</div>
        <span :class="Data.pageInfo.dyzt === 1 ? 'text-green-600 ' : 'text-red-600'">
          {{ Data.pageInfo.dyzt === 1 ? '已打印' : Data.pageInfo.dyzt === 0 ? '未打印' : '--' }}
        </span>
        <div>审阅状态：</div>
        <span :class="Data.pageInfo.syzt === 1 ? 'text-green-600 ' : 'text-red-600'">
          {{ Data.pageInfo.syzt === 1 ? '已审阅' : Data.pageInfo.syzt === 0 ? '未审阅' : '--' }}
        </span>
        <div>审阅人</div>
        <span>{{ Data.pageInfo.syr || '--' }}</span>
        <div>审阅时间</div>
        <span>{{ Data.pageInfo.sysj || '--' }}</span>
        <div>审阅机器</div>
        <span>{{ Data.pageInfo.syjq || '--' }}</span>
        <div>考试时间</div>
        <span>{{ Data.pageInfo.kssj || '--' }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import CanvasContainer from '/@/layouts/components/CanvasChart/canvasContainer.vue'
import { useRoute } from 'vue-router'
import { getByKdkskmId } from '/@/api/organization/examinationPaper'

import titleInfo from './titleInfo.vue'
import { getAuthCache } from '/@/utils/auth'

const route = useRoute()

const Data = reactive({
  imgList: [],
  pageInfo: {},
} as any)

async function getPageInfoFun() {
  const { data, code } = await getByKdkskmId({ kdkskmId: route.query.kdkskmId, sfsztFlag: true })
  if (code == 200) {
    Data.imgList = data
  }
}

onMounted(() => {
  Data.pageInfo = getAuthCache('examPaperInfo')
  getPageInfoFun()
})
</script>

<style scoped lang="less">
.card-container {
  display: flex;
  width: 100%;
  height: calc(@c_height - 20px);

  .right {
    background-color: #fff;
    width: 350px;
    border-radius: 10px;
    padding: 10px;
    div {
      font-size: 16px;
      margin-top: 10px;
    }
  }
}
</style>

<style lang="less"></style>
